<template>
  <div class="recycle-scroller-container" @scroll="setPool" ref="container">
    <div class="recycle-scroller-wrapper" :style="{ height: `${totalSize}px` }">
<!-- style top:`${poolItem.position}px`-->
      <div
        class="recycle-scroller-item"
        v-for="poolItem in pool"
        :key="poolItem.item[keyField]"
        :style="{
          transform: `translateY(${poolItem.position}px)`,backgroundColor:'#bfa',
        }"
      >
<!--        父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
            就是父组件中不能直接用自组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。如下代码-->

        <slot :item="poolItem.item"></slot><!--父组件中拿item 需要使用 slot-scope-->
<!--        <ListItem2 :item="poolItem.item"></ListItem2>-->
      </div>
    </div>
  </div>
</template>

<script>
  import ListItem2 from "./Listltem2.vue";
  export default {
    components:{
      ListItem2
    },
    props: {
      //数据的数组
      items: {
        type: Array,
        default: () => [],
      },
      //每一条数据的高度
      itemSize: {
        type: Number,
        default: 0,
      },
      keyField: {
        //给我的items数组中，每个对象哪个属性代表唯一且稳定的编号
        type: String,
        default: "id",
      },
    },
    data() {
      return {
        pool: [], //渲染池，保存当前需要渲染的数据
      };
    },
    mounted() {
      this.setPool();
    },
    computed: {
      totalSize() {
        return this.items.length * this.itemSize; //总高度，每一个元素的高度 * 数量
      },
    },
    methods: {
      //拿到需要被渲染的数据添加到 pool数组中
      setPool() {
        console.log("this.$refs.container.scrollTop",this.$refs.container.scrollTop)
        console.log("this.$refs.container.clientHeight",this.$refs.container.clientHeight)
        let scrollTop = this.$refs.container.scrollTop;
        let height = this.$refs.container.clientHeight;
        let startIndex = Math.floor(scrollTop / this.itemSize);//获取到要截取数据的起点
        let endIndex = Math.ceil((scrollTop + height) / this.itemSize);//获取到要截取数据的终点
        let scrollPos = startIndex * this.itemSize;
        this.pool = this.items.slice(startIndex, endIndex).map((it, i) => ({
          item: it,
          position: scrollPos + i * this.itemSize,
        }));
        console.log("this.pool",this.pool)
      },
    },
  };
</script>

<style scoped>
  .recycle-scroller-container {
    overflow: auto;
  }
  .recycle-scroller-wrapper {
    position: relative;
  }
  .recycle-scroller-item {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }
</style>
